<template>
  <a-config-provider
    :theme="{
      token: themeStore.currentSkin,
      algorithm: themeStore.isDark ? theme.darkAlgorithm : '',
    }"
    :locale="locale"
  >
    <a-watermark content="Super Admin Pro">
      <router-view v-slot="{ Component }">
        <!-- 添加动画效果 -->
        <transition name="fade">
          <component :is="Component" />
        </transition>
      </router-view>
    </a-watermark>
  </a-config-provider>
</template>

<script setup>
import { ref } from "vue";
import { useThemeStore } from "@/stores/models/theme";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import enUS from "ant-design-vue/es/locale/en_US";
import { theme } from "ant-design-vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
dayjs.locale("en");

//换肤
const themeStore = useThemeStore();

//国际化
const locale = ref(enUS);
</script>

<style scoped lang="scss">
#app {
  height: 100%;
}

.fade-enter-active {
  /* 增加了过渡的持续时间以使其更温和 */
  transition: opacity 0.7s, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* 更平缓的缓动函数 */
}

.fade-enter-from {
  opacity: 0;
  transform: scale(0.7);
  /* 从0.5开始缩放，使起始状态部分可见 */
  transform-origin: center;
}

.fade-enter-to {
  opacity: 1;
  transform: scale(1);
  /* 缩放到1，即正常尺寸 */
  transform-origin: center;
}
</style>
